<template>
	<view class="search-content">
		<!-- 搜索 -->
		<page-head>
			<slot slot="title">搜索</slot>
			<view slot="bottom">
				<view class="search-row">
					<view class="search-index">
						<!-- <view class="search-back" @click="toMain()"><image src="../../static/img/whiteback.png" mode="aspectFit"></image></view> -->
						<view class="search-wrapper">
							<view class="search">
								<view class="search-txt">
									<view class="placeholder">
										<input type="text" class="m-input" focus confirm-type="search" v-model="goodsName" @confirm="searchGoods()" placeholder="粘贴各大平台的宝贝标题" />
										<!-- <m-input class="m-input" type="text" clearable focus v-model="goodsName" placeholder="粘贴各大平台的宝贝标题" @confirm="searchGoods()"></m-input> -->
									</view>
								</view>
								<view class="icon-search" @click="searchGoods">
									<text>搜索</text>
									<!-- <image src="../../static/img/main-search.png" mode="aspectFit"></image> -->
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 分类 -->
				<view class="cate">
					<scroll-view class="search-tab-title search-center" scroll-x="true" id="search-tab-title">
						<scroll-view class="search-tab-title search-center" scroll-x="true" id="search-tab-title">
							<view v-for="(cate, index) in platformList" :key="index" :data-cateid="cate.id" :data-index="index" :class="[cateCurrentIndex == index ? 'search-tab-current' : '']"
							 @tap="cateChange($event)">
								{{ cate.name }}
							</view>
						</scroll-view>
					</scroll-view>
				</view>
			</view>

			<slot slot="right"><span /></slot>
		</page-head>
		<!-- 排序 -->
		<order-list :orderList="sortList" :activeIndex="activeIndex" :currentIndex="currentIndex" @selectChange="selectChange"></order-list>

		<view class="hascoupon-row" v-if="cateId == 3 && goodsName != ''">
			<view class="hascoupon">
				<view class="has-text">仅显示有券商品</view>
				<view class="has-switch">
					<switch name="switch" @change="couponChange" color="#ff4964" style="transform:scale(0.7)" checked />
				</view>
			</view>
		</view>
		<!-- 京东和拼多多商品列表 -->
		<jd-goods-list :goodsList="jdGoodList" :platform="'京东'" :loadingText="loadingText" @eventClick="tojdDetail($event)"
		 v-if="cateId == 1"></jd-goods-list>
		<jd-goods-list :goodsList="pddGoodList" :platform="'拼多多'" :loadingText="loadingText" @eventClick="topddDetail($event)"
		 v-if="cateId == 11"></jd-goods-list>
		<w-goods-list :goodsList="sqGooList" :loadingText="loadingText" @eventClick="tozyDetail($event)" v-if="cateId == 0"
		 @eventPlatform="startWebview"></w-goods-list>
		<tb-goods-list :goodsList="tbGoodsList" :loadingText="loadingText" @eventClick="totbDetail($event)" v-if="cateId == 3 && goodsName === ''"
		 :tm="false"></tb-goods-list>
		<tb-search-goods :goodsList="tbGoodsList" :loadingText="loadingText" @eventClick="totbDetail($event)" v-if="cateId == 3 && goodsName !== ''"
		 :tm="false"></tb-search-goods>
	</view>
</template>

<script>
	import mInput from '../../components/m-input.vue';
	import JdGoodsList from '@/components/jd-goods-list.vue';
	import myTabs from '@/components/myTabs.vue';
	import TbGoodsList from '../../components/tb-goods-list.vue';
	import orderList from '../../components/order/order-list.vue';
	import TbSearchGoods from '../../components/tb-search-goods.vue';

	let categore = 3,
		page = 1,
		pageSize = 20,
		orderIndex = 0,
		orderby = 0;

	export default {
		components: {
			JdGoodsList,
			mInput,
			myTabs,
			TbGoodsList,
			orderList,
			TbSearchGoods
		},
		data() {
			return {
				jdGoodList: [],
				sqGooList: [],
				pddGoodList: [],
				tbGoodsList: [],
				loadingText: '加载中...',
				goodsName: '',
				cateCurrentIndex: 0,
				cateId: 3,
				activeIndex: 0,
				currentIndex: 0,
				hascoupon: true,
				sortList: [{
						id: 0,
						name: '人气',
						img: false
					},
					{
						id: 1,
						name: '销量',
						img: false
					},
					{
						id: 2,
						name: '价格',
						img: true,
						order: 0
					}
				],
				platformList: [{
						id: 3,
						name: '天猫/淘宝'
					},
					{
						id: 0,
						name: '好品购'
					},
					{
						id: 1,
						name: '京东'
					},
					{
						id: 11,
						name: '拼多多'
					}
				]
			};
		},
		onLoad(event) {
			this.ti = '搜索';
			this.goodsName = '';
			page = 1;
			if (event.token != '' && event.token != 'null' && event.token != null && event.token != undefined && event.token !=
				'undefined') {
				uni.setStorageSync('token', decodeURI(event.token));
				uni.setStorageSync('bump', event.bump);
				uni.setStorageSync('relationId', event.relationId);
				uni.setStorageSync('mobile', event.customerId);
			}
			this.loadData();
		},
		onPullDownRefresh: function() {
			page = 1;
			this.jdGoodList = [];
			this.sqGooList = [];
			this.pddGoodList = [];
			this.tbGoodsList = [];
			this.loadData();
		},
		onReachBottom: function() {
			this.loadData();
		},
		methods: {
			couponChange(e) {
				console.log('switch1 发生 change 事件，携带值为', e.target.value);
				this.hascoupon = e.target.value;
				page = 1;
				this.tbGoodsList = [];
				this.genTBList();
			},
			startWebview(url) {
				appNavigateTo(url);
			},
			searchGoods() {
				onEvent('page_home_search');
				this.jdGoodList = [];
				this.sqGooList = [];
				this.pddGoodList = [];
				this.tbGoodsList = [];
				page = 1;
				this.loadData();
			},
			toMain() {
				uni.navigateBack({
					delta: 1
				});
			},
			cateChange: function(e) {
				// 选中的索引
				var index = e.currentTarget.dataset.index;
				// 具体的分类id
				var cateid = e.currentTarget.dataset.cateid;
				this.cateCurrentIndex = index;
				// 动态替换内容
				this.content = this.platformList[index].name;
				// 读取分类数据
				categore = cateid; //把分类信息发送给api接口即可读取对应分类的数据
				// 重置分页及数据
				page = 1;
				this.cateId = categore;
				// 加载对应分类数据覆盖上一个分类的展示数据 加载更多是继续使用这个分类
				orderby = 0;
				orderIndex = 0;
				this.jdGoodList = [];
				this.sqGooList = [];
				this.pddGoodList = [];
				this.tbGoodsList = [];
				this.initSort();
				this.loadData();
			},
			selectChange(e) {
				orderIndex = e.id;
				console.log(orderIndex);
				this.currentIndex = orderIndex;
				console.log(this.currentIndex)
				if (orderIndex >= 2) {
					if (orderby == 0 || orderby == 2) {
						orderby = 1;
						this.activeIndex = 1;
					} else {
						orderby = 2;
						this.activeIndex = 2;
					}
				} else {
					orderby = 0;
					this.activeIndex = 0;
				}

				// console.log(this.activeIndex);

				this.jdGoodList = [];
				this.sqGooList = [];
				this.pddGoodList = [];
				this.tbGoodsList = [];
				page = 1;
				// this.initSort();
				this.loadData();
			},
			initSort() {
				this.activeIndex = 0;
				this.currentIndex = 0;
				if (categore == 0) {
					this.sortList = [{
							id: 0,
							name: '新品',
							img: false
						},
						{
							id: 1,
							name: '优惠幅度',
							img: false
						},
						{
							id: 2,
							name: '优惠价',
							img: true,
							order: 0
						},
						{
							id: 3,
							name: '原价',
							img: true,
							order: 0
						}
					];
				} else if (categore == 1) {
					this.sortList = [{
							id: 0,
							name: '人气',
							img: false
						},
						{
							id: 1,
							name: '销量',
							img: false
						},
						{
							id: 2,
							name: '价格',
							img: true,
							order: 0
						},
						{
							id: 3,
							name: '抵扣金额',
							img: true,
							order: 0
						}
					];
				} else if (categore == 11) {
					this.sortList = [{
							id: 0,
							name: '人气',
							img: false
						},
						{
							id: 1,
							name: '销量',
							img: false
						},
						{
							id: 2,
							name: '价格',
							img: true,
							order: 0
						},
						{
							id: 3,
							name: '抵扣金额',
							img: true,
							order: 0
						}
					];
				} else if (categore == 3 || categore == 4) {
					this.sortList = [{
							id: 0,
							name: '人气',
							img: false
						},
						{
							id: 1,
							name: '销量',
							img: false
						},
						{
							id: 2,
							name: '价格',
							img: true,
							order: 0
						}
					];
				}
			},
			loadData() {
				this.loadingText = '加载中...';
				if (categore == 0) {
					this.genZiying();
				} else if (categore == 1) {
					this.genJDList();
				} else if (categore == 11) {
					this.genPDDList();
				} else if (categore == 3 || categore == 4) {
					this.genTBList();
				}
			},
			async genZiying() {
				try {
					let sortType = orderby == 1 ? 'desc' : 'asc';
					let sortField = 'lftime';
					if (orderIndex == 1) {
						sortField = 'customer_commision';
						sortType = 'desc';
					} else if (orderIndex == 2) {
						sortField = 'min_price';
					} else if (orderIndex == 3) {
						sortField = 'min_price_after_discount';
					} else {
						sortField = 'lftime';
						sortType = 'desc';
					} //""!_，。； 包邮 免费 折扣  、
					let name = this.goodsName.replace(/[&\;\\\"、,。_!\-]/g, '');
					let data = {
						page: page,
						pageSize: pageSize,
						name: name,
						sortField: sortField,
						sortType: sortType
					};
					let res = await this.$request.get('/coupon-product/self/product/search/goods', {
						data: data
					});
					let datas = res.data.data;
					if (datas.length > 0) {
						this.sqGooList = this.sqGooList.concat(datas);
						if (datas.length < 20) {
							this.loadingText = '没有更多了';
						}
						page++;
					} else {
						this.loadingText = '没有更多了';
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					this.loadingText = '没有更多了';
				}
			},
			async genJDList() {
				try {
					let sort = 0;
					let sortby = orderby == 1 ? 'desc' : 'asc';
					if (orderIndex == 0) {
						sort = '0';
						sortby = 'desc';
					} else if (orderIndex == 1) {
						sort = '4';
						sortby = 'desc';
					} else if (orderIndex == 2) {
						sort = '1';
					} else if (orderIndex == 3) {
						sort = '5';
					} else {
						sort = '0';
						sortby = 'desc';
					}
					let name = this.goodsName.replace(/[&\;\\\"、,。_!\-]/g, '');
					let data = {
						page: page,
						keyword: name,
						pagesize: 20,
						sort: sort,
						sortby: sortby,
						iscoupon: 1
					};
					let res = await this.$request.post('/coupon-product/jd/goods/list', {
						data: data
					});
					let datas = res.data;
					let newList = datas.data;
					if (newList != '' && newList.length > 0) {
						this.jdGoodList = this.jdGoodList.concat(newList);
						page++;
						if (page == 500 || newList.length < 20) {
							this.loadingText = '没有更多了';
						}
					} else {
						this.loadingText = '没有更多了';
					}
				} catch (e) {
					console.log(e);
					this.loadingText = '没有更多了';
				}
			},
			async genPDDList() {
				try {
					let sort = 16;
					let sortby = orderby == 1 ? 'desc' : 'asc';
					if (orderIndex == 0) {
						sort = '16';
					} else if (orderIndex == 1) {
						sort = '6';
					} else if (orderIndex == 2) {
						sort = orderby == 1 ? '10' : '9';
					} else if (orderIndex == 3) {
						sort = orderby == 1 ? '8' : '7';
					} else {
						sort = '16';
					}
					let name = this.goodsName.replace(/[&\;\\\"、,。_!\-]/g, '');
					let data = {
						page: page,
						keyword: name,
						pagesize: 20,
						sort: sort,
						sortby: sortby,
						iscoupon: 1
					};
					let res = await this.$request.post('/coupon-product/pdd/goods/list', {
						data: data
					});
					let datas = res.data;
					let newList = datas.data;
					if (newList != '' && newList.length > 0) {
						this.pddGoodList = this.pddGoodList.concat(newList);
						page++;
						if (page == 500 || newList.length < 20) {
							this.loadingText = '没有更多了';
						}
					} else {
						this.loadingText = '没有更多了';
					}
				} catch (e) {
					console.log(e);
					this.loadingText = '没有更多了';
				}
			},
			async genTBList() {
				try {
					let url = '';
					let data = {};
					let sort = 'tk_total_sales_des';
					if (orderIndex == 1) {
						sort = 'total_sales_des';
					} else if (orderIndex == 2) {
						sort = orderby == 1 ? 'price_des' : 'price_asc';
					} else {
						sort = 'tk_total_sales_des';
					}
					//let cou = this.hascoupon == false ? 'true' : 'false';
					console.log('cou====' + this.hascoupon.toString());
					let name = this.goodsName.replace(/[&\;\\\"、,。_!\-]/g, '').trim();
					if (name != '' && name != null) {
						url = '/coupon-product/myq/tbGoods/searchGoods';
						data = {
							pageno: page,
							pagesize: pageSize,
							keyword: name,
							sort: sort,
							hascoupon: this.hascoupon.toString()
						};
					} else {
						url = '/coupon-product/myq/tbGoods/goodsList';
						data = {
							pageno: page,
							pagesize: pageSize,
							cat: 0,
							istmall: false,
							hascoupon: this.hascoupon.toString(),
							sort: sort
						};
					}
					let res = await this.$request.post(url, {
						data: data
					});
					let datas = res.data;
					let newList = datas.data;
					if (newList instanceof Array) {
						if (newList != '' && newList.length > 0 && newList.length != undefined && newList.length != 'undefined') {
							this.tbGoodsList = this.tbGoodsList.concat(newList);
							page++;
							if (page == 500 || newList.length < 20) {
								this.loadingText = '没有更多了';
							}
						} else {
							this.loadingText = '没有更多了';
						}
					} else {
						let arr = [];
						arr.push(newList);
						console.log('arr.length===' + arr.length);
						if (newList != '' && newList.length > 0 && newList.length != undefined && newList.length != 'undefined') {
							this.tbGoodsList = this.tbGoodsList.concat(arr);
							this.loadingText = '没有更多了';
						} else {
							this.loadingText = '没有更多了';
						}
					}
				} catch (e) {
					console.log(e);
					this.loadingText = '没有更多了';
				}
			},
			tozyDetail(e) {
				let aUrl = this.$httpUrl + 'pages/selfdetail/selfdetail?skuId=' + e.id + '&cid=' + e.cateids + '&title=' + e.proName +
					'&seller=京东自营';
				let hUrl = '../selfdetail/selfdetail?skuId=' + e.id + '&cid=' + e.cateids + '&title=' + e.proName + '&seller=京东自营';
				h5NavigateTo(aUrl, hUrl);
			},
			tojdDetail(e) {
				let aUrl = this.$httpUrl + 'pages/detail/detail?skuId=' + e.skuId + '&cid=' + e.cid + '&title=' + e.skuName +
					'&seller=1';
				let hUrl = '../detail/detail?skuId=' + e.skuId + '&cid=' + e.cid + '&title=' + e.skuName + '&seller=1';
				h5NavigateTo(aUrl, hUrl);
			},
			topddDetail(e) {
				let aUrl = this.$httpUrl + 'pages/detail/detail?skuId=' + e.skuId + '&cid=' + e.cid + '&title=' + e.skuName +
					'&seller=11';
				let hUrl = '../detail/detail?skuId=' + e.skuId + '&cid=' + e.cid + '&title=' + e.skuName + '&seller=11';
				h5NavigateTo(aUrl, hUrl);
			},
			totbDetail(e) {
				const seller = this.cateId == 3 ? '淘宝' : '天猫';
				const tm = this.cateId == 3 ? false : true;
				let aUrl =
					this.$httpUrl +
					'pages/tbdetail/tbdetail?skuId=' +
					e.num_iid +
					'&cid=0' +
					'&title=' +
					e.title +
					'&seller=' +
					seller +
					'&coupon_amount=' +
					e.coupon_amount +
					'&startTime=' +
					e.coupon_start_time +
					'&endTime=' +
					e.coupon_end_time +
					'&tm=' +
					tm;
				let hUrl =
					'../tbdetail/tbdetail?skuId=' +
					e.num_iid +
					'&cid=0' +
					'&title=' +
					e.title +
					'&seller=' +
					seller +
					'&coupon_amount=' +
					e.coupon_amount +
					'&startTime=' +
					e.coupon_start_time +
					'&endTime=' +
					e.coupon_end_time +
					'&tm=' +
					tm;
				h5NavigateTo(aUrl, hUrl);
			}
		}
	};
</script>

<style lang="scss">
	.hascoupon-row {
		width: 100%;
		min-width: 700px;
		height: 60px;

		.hascoupon {
			width: 90%;
			padding-left: 5%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28px;
		}
	}

	.search-row {
		/* width: 750px; */
		width: 100%;
		min-width: 750px;
		background: white;
		/*position: fixed;*/
		top: 0;
		z-index: 1010;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0px 15px 10px -15px #f0f0f0;

		.search-index {
			width: 96%;
			padding: 16px 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.search-back {
				width: 10%;

				image {
					width: 80px;
					height: 60px;
				}
			}

			.search-wrapper {
				z-index: 10;
				width: 100%;
				height: 70px;
				line-height: 70px;
				/*padding: 10px 50px;*/

				.search {
					color: #888;
					font-size: 30px;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.search-txt {
						width: 88%;
						height: 100%;
						background: #f0f0f0;
						border-radius: 50px;
						padding: 10px 0;

						.placeholder {
							width: 100%;
							height: 33px;

							.m-input {
								margin-left: 20px;
								height: 33px;
								line-height: 33px;
								font-size: 30px;
							}

							.m-input-icon {
								height: 100%;
							}
						}
					}

					.icon-search {
						/* 	margin-right: -34px; */
						color: black;
						margin-left: 10px;
						width: 10%;

						image {
							width: 8vw;
							height: 8vw;
							align-items: center;
						}
					}
				}
			}
		}
	}

	.header-row {
		width: 100%;
		height: 60px;
		background-image: url('../../static/img/search/list.png');
		/* justify-content: space-between; */
		background-repeat: no-repeat;
		background-size: cover;
		flex-wrap: nowrap;

		.header-line {
			width: 100%;
			height: 60px;
			display: inline-flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30px;
			padding-left: 5%;

			.header-range {
				width: 30%;
				height: 60px;
				justify-content: space-between;

				image {
					width: 20px;
					height: 20px;
				}
			}

			.hearder-rate {
				width: 30%;
				height: 60px;

				image {
					width: 20px;
					height: 15px;
				}
			}

			.header-price {
				width: 30%;
				height: 60px;

				image {
					width: 20px;
					height: 15px;
				}
			}
		}
	}

	.place {
		height: 10px;
	}

	/* tab列表 */
	.search-tab {
		padding: 0;
	}

	.search-tab-title {
		white-space: nowrap;
		text-align: center;
		background: #ffffff;
	}

	.search-tab-title view {
		width: auto;
		padding: 10px 30px;
		margin: 0 16px;
		line-height: 42px;
		display: inline-block;
		text-align: center;
		border-bottom: 2px solid #ffffff;
		font-size: 30px;
	}

	.search-tab-title view:first-child {
		margin-left: 0;
	}

	.search-tab-title view:last-child {
		margin-right: 0;
	}

	.search-tab-current {
		border-bottom: 4px solid #ff4964 !important;
		color: #ff4964;
	}

	.cate {
		width: 100%;
		z-index: 99;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		/* position: fixed;
        left: 0;
        top: 0; */
	}

	/* end */
</style>
